<template>
	<div id="home">
		<div class="div_background">
			<div class="home_div_top">
			    <span>
					<img  src="../assets/home/定位.png" /> 北京理工大学国防科技园二号楼10层
				</span>	
				<span>
					<img class="icon_img_2" src="../assets/home/铃铛.png" />
				</span>
			</div>

			<div class="home_div_search">
				<router-link to="/search"><span>
					<input class="searchBox" type="text" name="search" placeholder="山姆会员商店优惠商品">
				</span></router-link>
			</div>

			<div class="home_advert">
				<img src="../assets/home/狂欢节主图.png" />
			</div>

			<div class="homediv">
				<div class="little_between">
					<div class="div_colunm">
						<span>
							<img src="../assets/home/超市.png" />
						</span>
						<span>超市便利</span>
					</div>
					<div class="div_colunm">
						<span><img src="../assets/home/菜市场.png" /></span>
						<span>菜市场</span>
					</div>
					<div class="div_colunm">
						<span><img src="../assets/home/水果店.png" /></span>
						<span>水果店</span>
					</div>
					<div class="div_colunm">

						<span><img src="../assets/home/鲜花.png" /></span>
						<span>鲜花绿植</span>
					</div>
					<div class="div_colunm">
						<span><img src="../assets/home/医药健康.png" /></span>
						<span>医药健康</span>
					</div>
				</div>
				<div class="little_between">
					<div class="div_colunm">
						<span>
							<img src="../assets/home/家居.png" />
						</span>
						<span>家具时尚</span>
					</div>
					<div class="div_colunm">
						<span><img src="../assets/home/蛋糕.png" /></span>
						<span>烘培蛋糕</span>
					</div>
					<div class="div_colunm">
						<span><img src="../assets/home/签到.png" /></span>
						<span>签到</span>
					</div>
					<div class="div_colunm">

						<span><img src="../assets/home/大牌免运.png" /></span>
						<span>大牌免运</span>
					</div>
					<div class="div_colunm">
						<span><img src="../assets/home/红包.png" /></span>
						<span>红包套餐</span>
					</div>
				</div>
			</div>
		</div>


		<div class="home_div_bottom">
			<div class="home_div_bottom_top">
				<span>附近店铺</span>
			</div>


			<router-link to="/productxq"><div class="homediv-bottom">
				<img src="../assets/home/沃尔玛.png" />
				<div class="homediv-text">
					<div class="homediv-text_first">沃尔玛</div>
					<div class="homediv-second">
						<span>月售1万+</span>
						<span>起送￥0</span>
						<span>基础运费￥5</span>
					</div>
					<div class="homediv-text_third">VIP尊享满89元减4元运费券（每月3张）</div>
				</div>
			</div></router-link>

			<div class="homediv-bottom">
				<img src="../assets/home/沃尔玛.png" />
				<div class="homediv-text">
					<div class="homediv-text_first">沃尔玛</div>
					<div class="homediv-second">
						<span>月售1万+</span>
						<span>起送￥ 0</span>
						<span>基础运费￥5</span>
					</div>
					<div class="homediv-text_third">VIP尊享满89元减4元运费券（每月3张）</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	#home {
		background-color: #f8f8f8;
		height: 100%;
		position: fixed;
		width: 100%;
	}

	.div_background {
		background-color: white;
		height: 358px;
	}

	.home_div_top {
		display: flex;
		justify-content: space-between;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
		padding-top: 18.3px;
		
	}

	.home_div_top img {
		width: 18px;
		height: 19px;
		margin-left: 10px;

	}

	.home_div_top .icon_img_2 {
		width: 16px;
		height: 19.2px;
		margin-right: 10px;
	}
	.home_div_search .searchBox {
		background: #F5F5F5;
		border-radius: 16px;
		height: 32px;
		width: 85%;
		margin-left: 22px;
		/* margin-right: 20px; */
		text-align: left;
		padding-left: 12.1px;
		border: 0;
		margin-top: 16px;
	}

	.home_advert img {
		height: 86px;
		width: 90%;
		margin-left: 18px;
		margin-right: 18px;
		margin-top: 12px;
	}

	.homediv {
		margin-left: 26px;
		margin-right: 26px;
	}

	.homediv .div_colunm {
		display: flex;
		flex-direction: column;
	}

	.homediv .little_between {
		display: flex;
		justify-content: space-between;
		margin-top: 16px;
	}

	.home_div_bottom {
		height: 100%;
		background-color: white;
		margin-top: 10px;
	}

	.home_div_bottom .home_div_bottom_top {
		font-family: PingFangSC-Medium;
		font-size: 18px;
		color: #333333;
		padding-top: 16px;
		text-align: left;
		margin-left: 18px;
	}

	.home_div_bottom .homediv-bottom {
		margin-top: 14px;
		text-align: left;
		margin-left: 18px;
		display: flex;
		justify-content: start;
	}

	.home_div_bottom .homediv-bottom img {
		height: 56px;
		width: 56px;
	}

	.home_div_bottom .homediv-bottom .homediv-text {
		margin-left: 16px;
	}

	.homediv-bottom .homediv-text .homediv-text_first {
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
	}

	.homediv-bottom .homediv-text .homediv-second {
		font-family: PingFangSC-Regular;
		font-size: 13px;
		color: #333333;
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
	}

	.homediv-bottom .homediv-text .homediv-text_third {
		font-family: PingFangSC-Regular;
		font-size: 13px;
		color: #E93B3B;
		margin-top: 8px;
		border-bottom: 1px solid darkgray;
		padding-bottom: 12px;
	}
</style>
